<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back()"></div>
      <div class="name">榜单</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>


    <div class="ranking-list">
    	<div class="ranking-item" v-for="item in list">
    		<router-link :to="{path:'/totalRanking/'+item.id}" class="tt">
		        <span class="tt-name">{{item.name}}</span>
		        <span class="r-icon"></span>
		    </router-link>
    		<div class="layout1-box">
          <img :src="item.pic ? item.pic : errorBookDefaultImg" class="item-l" :onerror="errorBookDefaultImg">
          <div class="item-r">
              <router-link :to="{path:'/bookdetails/'+bookitem.id}" :class="['item-desc medal-icon'+(index+1)]" v-for="(bookitem,index) in item.list">{{bookitem.title}}</router-link>
          </div>
        </div>
    	</div>
    </div>

     <!-- 底部 -->
    <web-footer active="position"></web-footer>
  </div>
</template>
<script>
		import bookDefaultImg from '@/assets/images/book.png';
		import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'ranking',
    	components: {
    		WebFooter
	    },
    	data () {
      		return {
      			list:['','','','','','','',''],
            errorBookDefaultImg:'this.src="' + bookDefaultImg + '"',
	      	}
	    },
      created(){
        this.$axios.get(this.$store.state.url+"rank_list?device_sn="+this.$store.state.device).then(res=>{
          console.log(res.data);
          this.list = res.data.data;
        });
      },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          menuToggle(){
            this.menuShow = !this.menuShow;
          }
	    }
  	}
</script>
<style lang="scss" scoped>
	.tt{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom:30px;
        .tt-name{
          font-size:38px;
          font-weight:bold;
          color:#1c1c1c;
        }
        .r-icon{
        	width:40px;
        	height:40px;
        	background:url(../assets/images/icon/r-icon2.png) no-repeat 0 0/100% auto;
        }
    }

    .ranking-list{
    	.ranking-item{
    		padding:40px 30px;
    		border-bottom:1px solid #f9f9f9;
    		display: block;
    	}
    	.item-desc{
    		margin-bottom:30px;
    		padding-left:60px;
    		position: relative;
    		&:after{
    			content: '';
	    		position: absolute;
	    		top:0;
	    		left:0;
	    		width:36px;
	    		height:36px;
    		}
    		&:last-child{
    			margin-bottom:0;
    		}
    	}
    	.medal-icon1:after{
    		background:url(../assets/images/icon/medal-icon1.png) no-repeat 0 0/100% auto;
    	}
    	.medal-icon2:after{
    		background:url(../assets/images/icon/medal-icon2.png) no-repeat 0 0/100% auto;
    	}
    	.medal-icon3:after{
    		background:url(../assets/images/icon/medal-icon3.png) no-repeat 0 0/100% auto;
    	}
    }
</style>
